<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew title="我的续签沟通" showBack />
    </template>
    <div class="cantainer">
      <div v-if="formData?.control?.collectionModel[0]" class="previewCenter">
        <div class="text">{{ formData.name }}</div>
        <PreviewCenter
          :disabled="!(formData.renewal === 3)"
          v-model:setUpList="formData.control.collectionModel[0].controlModel"
        />
      </div>
    </div>
    <footer>
      <a-space>
        <a-button class="btn" type="secondary" @click="router.back()">
          取消
        </a-button>
        <a-button type="primary" @click="save" v-if="formData.renewal === 3">
          确认提交
        </a-button>
      </a-space>
    </footer>
  </ContentCard>
</template>

<script setup lang="ts">
import {
  GetUserRenewCommunicate,
  EditUserRenewCommunicate,
  EditUserRenewState
} from '@/apis/management/contract/baseSetting';
import PreviewCenter from '@/components/DynamicFormsNew/SetUpForm/components/CenterConfig/previewCenterCopy.vue';
import { Message } from '@arco-design/web-vue';
let route = useRoute();
let router = useRouter();

let formData = reactive<any>({});
let initializeData = async () => {
  let res = await GetUserRenewCommunicate({ id: route.query.id });
  Object.assign(formData, res);
  formData.control.collectionModel[0].controlModel =
    formData.control.collectionModel[0].controlModel?.map((item: any) => {
      return { ...item, ctlValue: { ...item.ctlValue, ctlValue: null } };
    });

  console.log(JSON.parse(localStorage.getItem('userInfo') + ''), 111);
};
initializeData();
let save = async () => {
  let findItem = formData?.control?.collectionModel[0].controlModel?.find(
    ({ ctlCode }: any) => ctlCode === 'CFC9CEC1B96504D259BB7DB35427C3C38'
  );
  if (!findItem.ctlValue.ctlValue) return Message.error('请选择是否同意续签');
  formData.renewal = findItem.ctlValue.ctlValue === '不同意' ? 2 : 1;
  await Promise.all([
    EditUserRenewCommunicate(formData),
    EditUserRenewState({ id: formData.userId, type: formData.renewal })
  ]);
  router.back();
};
</script>

<style scoped>
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
    margin-left: 10px;
  }
}
.cantainer {
  display: flex;
  justify-content: center;
}
.previewCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 1400px;
  position: relative;
  padding: 20px;
  .text {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
  }
}
</style>
